<template>
	<view class="choiceness-container">
		<view class="choiceness-content">
			<view class="choiceness-item" v-for="item in choicenessList" :key="item.img">
				<image :src="item.img" mode=""></image>
				<view class="desc">{{item.desc}}</view>
				<view class="item-footer">
					<view class="user-info">
						<image :src="item.user" mode=""></image>
						<view class="user-name">{{item.userName}}</view>
					</view>
					<view class="like">关注</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				choicenessList: [{
						img: "../../static/imgs/choiceness1.png",
						desc: "好久没运动了，运动了几个小时感觉自己的运动还不...",
						user: "../../static/imgs/user-avtar.png",
						userName: '爱丽丝'
					},
					{
						img: "../../static/imgs/choiceness2.png",
						desc: "好久没运动了，运动了几个小时感觉自己的运动还不...",
						user: "../../static/imgs/user-avtar.png",
						userName: '爱丽丝'
					},
					{
						img: "../../static/imgs/choiceness3.png",
						desc: "好久没运动了，运动了几个小时感觉自己的运动还不...",
						user: "../../static/imgs/user-avtar.png",
						userName: '爱丽丝'
					},
					{
						img: "../../static/imgs/choiceness4.png",
						desc: "好久没运动了，运动了几个小时感觉自己的运动还不...",
						user: "../../static/imgs/user-avtar.png",
						userName: '爱丽丝'
					},
					{
						img: "../../static/imgs/choiceness5.png",
						desc: "好久没运动了，运动了几个小时感觉自己的运动还不...",
						user: "../../static/imgs/user-avtar.png",
						userName: '爱丽丝'
					}
				]
			};
		}
	}
</script>

<style lang="scss" scoped>
	.choiceness-content {
		display: flex;
		justify-content: space-between;
		align-items: center;
		flex-wrap: wrap;
		.choiceness-item {
			width: 306rpx;
			margin-bottom: 20rpx;
			.desc {
				margin: 20rpx 0;
				text-overflow: -o-ellipsis-lastline;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 2;
				-webkit-box-orient: vertical;
			}

			image {
				width: 306rpx;
				height: 326rpx;
			}

			.item-footer {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin: 20rpx 0;

				.user-info {
					display: flex;
					align-items: center;

					image {
						width: 60rpx;
						height: 60rpx;
						margin-right: 20rpx;
					}
				}

				.like {
					width: 110rpx;
					border-radius: 15rpx;
					background: #F6FF00;
					border: 1px solid #000000;
					height: 42rpx;
					color: #1A1A1A;
					text-align: center;
					line-height: 42rpx;
				}
			}
		}
	}
</style>
